<style>
    .svg-border-animation {
        position: absolute;
        width: 320px;
        height: 60px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);


    }

    .hover-text {
        position: absolute;
        line-height: 60px;
        width: 320px;
        top: 0;
        color: #333;
        font-size: 28px;
        text-align: center;
        cursor: pointer;
    }

    .shape {
        fill: transparent;
        stroke-width: 4px;
        stroke: #333;
        stroke-dasharray: 160 520;
        /* dashoffset可以调整线段的位置，这里调整到底部 */
        stroke-dashoffset: -460;
    }

    /*hover的文字效果*/
    .svg-border-animation:hover .hover-text {
        transition: 0.5s;
        color: #3f51b5;
    }

    .svg-border-animation:hover .shape {
        animation: draw 0.5s linear forwards;
    }

    @keyframes draw {
        0% {
            stroke-dasharray: 160 520;
            stroke-dashoffset: -460;
            stroke-width: 4px;
        }
        100%{
            stroke-dasharray:760 ;
            stroke-dashoffset: 0;
            stroke-width: 2px;
            stroke: #3f51b5;
        }
    }
</style>

<hgroup class="svg-border-animation">
    <svg viewBox="0 0 320 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect class="shape" height="60" width="320"></rect>
    </svg>
    <div class="hover-text">Hover Me</div>

</hgroup>